<!doctype html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
	<meta charset="UTF-8">
	<title>研学旅行后台系统</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
    <link rel="stylesheet" th:href="@{/css/font.css}">
	<link rel="stylesheet" th:href="@{/css/xadmin.css}">
    <link rel="stylesheet" href="https://cdn.bootcss.com/Swiper/3.4.2/css/swiper.min.css">
    <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <script type="text/javascript" src="https://cdn.bootcss.com/Swiper/3.4.2/js/swiper.jquery.min.js"></script>
    <script th:src="@{/lib/layui/layui.js}" charset="utf-8"></script>
    <script type="text/javascript" th:src="@{/js/xadmin.js}"></script>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" th:href="@{/css/index.css}">
    <script type="text/javascript" th:src="@{/js/vue.js}"></script>
	<style>
		.btn-group-lg>.btn, .btn-lg {
		   font-size: 12px;
		}
		#neirong{
			margin-top: 60px;
		}	
		.xbs768 {
		    display: block;
		}
	</style>
	
	
	<script type="text/javascript" th:inline="javascript">
        
    </script>
	
	
</head>
<body>
<!-- 顶部开始 -->
<!--     <div class="container"> -->
<!--         <div class="logo"><a href="./index.html">研学旅行后台系统</a></div> -->
<!--         <div class="open-nav"><i class="iconfont">&#xe699;</i></div> -->
<!--         <ul class="layui-nav right" lay-filter=""> -->
<!--           <li class="layui-nav-item"> -->
<!--             <a href="javascript:;">admin</a> -->
<!--             <dl class="layui-nav-child"> 二级菜单 -->
<!--               <dd><a href="">个人信息</a></dd> -->
<!--               <dd><a href="">切换帐号</a></dd> -->
<!--               <dd><a href="./login.html">退出</a></dd> -->
<!--             </dl> -->
<!--           </li> -->
<!--           <li class="layui-nav-item"><a href="/">前台首页</a></li> -->
<!--         </ul> -->
<!--     </div> -->
    <!-- 顶部结束 -->
   	<div class="wrapper">
   	
        <!-- 右侧主体开始 -->
        <div class="page-content">
			<div class="content">
					<div class="layui-form-pane" style="text-align: center;">
						<div class="layui-form-item" style="display: inline-block;">
							<div class="layui-input-inline">
								<input type="text" name="title" placeholder="请输入标题名"
									autocomplete="off" class="layui-input">
							</div>
							<div class="layui-input-inline" style="width: 80px">
								<button class="layui-btn"  v-on:click="queryPage(1)">
									<i class="layui-icon">&#xe615;</i>
								</button>
							</div>
						</div>
					</div>
				<table class="layui-table">
					<thead>
						<tr>
							<th><input type="checkbox" id="checkall" value=""></th>
							<th>ID</th>
							<th>标题</th>
							<th>内容</th>
							<th>接收信息</th>
						</tr>
					</thead>
					<tbody>
						<tr v-for="(item,index) in page.list">
							<td><input type="checkbox" value="1" :iid="item.id" name="s1" class="checkbox"></td>
							<td class="buMenid">{{item.id}}</td>
							<td>{{item.title}}</td>
							<td>{{item.content}}</td>
							<td class="td-status" v-if="item.spare1==='1'">
								<a title="查看" href="javascript:;"  :data="item.id" onclick="show(this)" class="ml-5"  style="text-decoration:none">
	                                <i class="layui-icon" >&#xe642;</i>
	                            </a>
							</td>
							<td class="td-status" v-if="item.spare1==='2'">
								<a title="查看" href="javascript:;"  :data="item.id" onclick="show(this)" class="ml-5"  style="text-decoration:none">
	                                <i class="layui-icon" >&#xe642;</i>
	                            </a>
							</td>
							<td class="td-status" v-if="item.spare1==='3'">
								<a title="查看" href="javascript:;"  :data="item.id" onclick="show(this)" class="ml-5"  style="text-decoration:none">
	                                <i class="layui-icon" >&#xe642;</i>
	                            </a>
							</td>
							<td class="td-status" v-if="item.spare1==='4'">
								<a title="查看" href="javascript:;"  :data="item.id" onclick="show(this)" class="ml-5"  style="text-decoration:none">
	                                <i class="layui-icon" >&#xe642;</i>
	                            </a>
							</td>
							<td class="td-status" v-if="item.spare1==='5'">
								<a title="查看" href="javascript:;"  :data="item.id" onclick="show(this)" class="ml-5"  style="text-decoration:none">
	                                <i class="layui-icon" >&#xe642;</i>
	                            </a>
							</td>
							<td class="td-status" v-if="item.spare1==='6'">
								<a title="查看" href="javascript:;"  :data="item.id" onclick="show(this)" class="ml-5"  style="text-decoration:none">
	                                <i class="layui-icon" >&#xe642;</i>
	                            </a>
							</td>
						</tr>
					</tbody>
				</table>

				<button v-on:click="queryPage(page.prePage)" class="layui-btn layui-btn-warm">上一页</button>
				<button v-on:click="queryPage(page.nextPage)" class="layui-btn layui-btn-danger">下一页</button>
					
					
					
				<!-- 右侧内容框架，更改从这里开始 -->
					
				<!-- 右侧内容框架，更改从这里结束 -->
			</div>
		</div>
        <!-- 右侧主体结束 -->
    </div>
    <!-- 背景切换结束 -->
    <script th:inline="javascript">
    
    
    
    
    
    /*用户-启用*/
    function member_start(obj,id){
        layer.confirm('确认要启用吗？',function(index){
            //发异步把用户状态进行更改
            $(obj).parents("tr").find(".td-manage").prepend('<a style="text-decoration:none" onClick="member_stop(this,id)" href="javascript:;" title="停用"><i class="layui-icon">&#xe601;</i></a>');
            $(obj).parents("tr").find(".td-status").html('<span class="layui-btn layui-btn-normal layui-btn-mini">已启用</span>');
            $(obj).remove();
            layer.msg('已启用!',{icon: 6,time:1000});
        });
    }
//     用户-编辑
//     function member_edit (title,url,id,w,h) {
       
//     }
    
    function show(th){
    	 x_admin_show("标题","xiangQing?LookIds="+$(th).attr("data"),"500","400"); 
    }
    
    
    
    
	var vue = new Vue({
    	
    	el:'.wrapper',
    	data:{
    		
    		page:''
    		
    	},methods:{
    		queryPage(ind){
    		page(ind);
    		
    	},
    	Look(can){
    		
    	}
    		
    	}
    	
    });
	
    function page(curPage){
    	var title = $("[name = title]").val();
		  $.ajax({
			  url:[[@{/notice/noticeQuery}]],
			  type:"post",
			  data:{
				  'currentPage':curPage,
				  'title':title
			  },
			  dataType:"json",
			  success:function(data){
				  vue.page = data;
			  }
			  
		  });
    	
    }
    
	$(function(){
		  $("#checkall").click(function(){
		  	if(this.checked==true){
		  		   $("[name='s1']").each(function(){
		  		   	this.checked=true;
		  		   	
		  		   });
			  	}else{
			  		$("[name='s1']").each(function(){
		  		   	this.checked=false;
		  		   	
		  		   });
			  	}
	  	
	  		});
		  
		  page(1);
		   
	});  
		  
		  
		/*   var buid = [];
		   
		  $("#fasuo").click(function(){
			  var title = $("[name=username]").val();
			  var content = $("[name=sign]").val();
			 $.each($(".checkbox"),function(){
				 if(this.checked){
					 var spare1 = $(this).attr("iid");
// 					 console.log(spare1);
					 buid = spare1;
// 					 for(var i=0;i<buid.length;i++){
// 						 console.log(buid[i]);
						 
// 					 }
					 $.ajax({
						 url:[[@{/notice/toAdd}]],
						 type:"post",
						 data:{
							  'spare1':buid,
							  'title':title,
							  'content':content
						  },
						  dataType:"json",
						  success:function(result){
							  var index = parent.layer.getFrameIndex(window.name);
							  parent.layer.close(index);
						  },error:function(date){
							  var index = parent.layer.getFrameIndex(window.name);
							  parent.layer.close(index);
						  }
					 });
				 }
				 
			 });
			  
		  }); */
		  
    </script>
</body>
</html>
